Adwaita: stack switcher needs-attention class style

diff --git a/gtk/resources/theme/Adwaita/_common.scss b/gtk/resources/theme/Adwaita/_common.scss
index d053428eb0dc7385501e766537681d897b02437c..318b16c991faabb01f2e3a8b820b347b3221b74d 100644 (file)
--- a/gtk/resources/theme/Adwaita/_common.scss
+++ b/gtk/resources/theme/Adwaita/_common.scss
@@ -248,6 +248,25 @@ GtkLabel {
  * Buttons *
  ***********/
 
+@keyframes needs_attention {
+  from {
+    //background-size: 0 0, 0 0;
+    background-image: -gtk-gradient(radial,
+                                    center center, 0,
+                                    center center, 0.01,
+                                    to($selected_bg_color),
+                                    to(transparent));
+  }
+  to {
+    //background-size: 6px 6px, 6px 6px;
+    background-image: -gtk-gradient(radial,
+                                    center center, 0,
+                                    center center, 0.5,
+                                    to($selected_bg_color),
+                                    to(transparent));
+  }
+}
+
 .button {
   border-radius: 3px;
   transition: all 200ms ease-out;
@@ -338,6 +357,43 @@ GtkLabel {
     }
   }
 
+  // stack switcher buttons
+  .action-bar .stack-switcher &.image-button,
+  .header-bar .stack-switcher &.image-button {
+    // override the padding since we need to add some padding on the
+    // GtkImage itself to fit the circle
+    padding: 5px 2px;
+  }
+  .stack-switcher > & {
+    padding-left: 0;  // subtract the padding which will be added to the
+    padding-right: 0; // GtkLabel
+    > GtkLabel {
+      padding-left: 6px;  // label padding
+      padding-right: 6px; //
+    }
+    > GtkImage {
+      padding: 3px 6px; // image padding
+    }
+    &.needs-attention > GtkLabel,
+    &.needs-attention > GtkImage {
+      animation: needs_attention 150ms ease-in;
+      background-image: -gtk-gradient(radial,
+                                      center center, 0,
+                                      center center, 0.5,
+                                      to($selected_bg_color),
+                                      to(transparent)),
+                        -gtk-gradient(radial,
+                                      center center, 0,
+                                      center center, 0.5,
+                                      to(white),
+                                      to(transparent));
+      background-size: 6px 6px, 6px 6px;
+      background-repeat: no-repeat;
+      background-position: right 2px, right 3px;
+      &:backdrop { background-size: 6px 6px, 0 0;}
+    }
+  }
+
   // buttons in header bars and action bars
   .header-bar &.image-button,
   .action-bar &.image-button { padding: 8px; }

diff --git a/gtk/resources/theme/Adwaita/gtk-contained-dark.css b/gtk/resources/theme/Adwaita/gtk-contained-dark.css
index ae98f1b9f3144c583d4144ca98031e2206c05c72..75c4baba3dbbc3fbe1e79e0e9e13013b9160daf9 100644 (file)
--- a/gtk/resources/theme/Adwaita/gtk-contained-dark.css
+++ b/gtk/resources/theme/Adwaita/gtk-contained-dark.css
@@ -254,6 +254,12 @@
 /***********
  * Buttons *
  ***********/
+@keyframes needs_attention {
+  from {
+    background-image: -gtk-gradient(radial, center center, 0, center center, 0.01, to(#215d9c), to(transparent)); }
+
+  to {
+    background-image: -gtk-gradient(radial, center center, 0, center center, 0.5, to(#215d9c), to(transparent)); } }
 .button {
   border-radius: 3px;
   transition: all 200ms ease-out;
@@ -472,6 +478,24 @@
       text-shadow: none;
       icon-shadow: none;
       box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(238, 238, 236, 0.1); }
+  .action-bar .stack-switcher .button.image-button, .header-bar .stack-switcher .button.image-button {
+    padding: 5px 2px; }
+  .stack-switcher > .button {
+    padding-left: 0;
+    padding-right: 0; }
+    .stack-switcher > .button > GtkLabel {
+      padding-left: 6px;
+      padding-right: 6px; }
+    .stack-switcher > .button > GtkImage {
+      padding: 3px 6px; }
+    .stack-switcher > .button.needs-attention > GtkLabel, .stack-switcher > .button.needs-attention > GtkImage {
+      animation: needs_attention 150ms ease-in;
+      background-image: -gtk-gradient(radial, center center, 0, center center, 0.5, to(#215d9c), to(transparent)), -gtk-gradient(radial, center center, 0, center center, 0.5, to(white), to(transparent));
+      background-size: 6px 6px, 6px 6px;
+      background-repeat: no-repeat;
+      background-position: right 2px, right 3px; }
+      .stack-switcher > .button.needs-attention > GtkLabel:backdrop, .stack-switcher > .button.needs-attention > GtkImage:backdrop {
+        background-size: 6px 6px, 0 0; }
   .header-bar .button.image-button, .action-bar .button.image-button {
     padding: 8px; }
   .header-bar .button.text-button, .action-bar .button.text-button {

diff --git a/gtk/resources/theme/Adwaita/gtk-contained.css b/gtk/resources/theme/Adwaita/gtk-contained.css
index 03645aedb2ef2a6869f4fb291fe0e66fcee69db4..1a5348edac021bbaa50a7ecf57d85aa96038c4e0 100644 (file)
--- a/gtk/resources/theme/Adwaita/gtk-contained.css
+++ b/gtk/resources/theme/Adwaita/gtk-contained.css
@@ -246,6 +246,12 @@
 /***********
  * Buttons *
  ***********/
+@keyframes needs_attention {
+  from {
+    background-image: -gtk-gradient(radial, center center, 0, center center, 0.01, to(#4a90d9), to(transparent)); }
+
+  to {
+    background-image: -gtk-gradient(radial, center center, 0, center center, 0.5, to(#4a90d9), to(transparent)); } }
 .button {
   border-radius: 3px;
   transition: all 200ms ease-out;
@@ -464,6 +470,24 @@
       text-shadow: none;
       icon-shadow: none;
       box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px white; }
+  .action-bar .stack-switcher .button.image-button, .header-bar .stack-switcher .button.image-button {
+    padding: 5px 2px; }
+  .stack-switcher > .button {
+    padding-left: 0;
+    padding-right: 0; }
+    .stack-switcher > .button > GtkLabel {
+      padding-left: 6px;
+      padding-right: 6px; }
+    .stack-switcher > .button > GtkImage {
+      padding: 3px 6px; }
+    .stack-switcher > .button.needs-attention > GtkLabel, .stack-switcher > .button.needs-attention > GtkImage {
+      animation: needs_attention 150ms ease-in;
+      background-image: -gtk-gradient(radial, center center, 0, center center, 0.5, to(#4a90d9), to(transparent)), -gtk-gradient(radial, center center, 0, center center, 0.5, to(white), to(transparent));
+      background-size: 6px 6px, 6px 6px;
+      background-repeat: no-repeat;
+      background-position: right 2px, right 3px; }
+      .stack-switcher > .button.needs-attention > GtkLabel:backdrop, .stack-switcher > .button.needs-attention > GtkImage:backdrop {
+        background-size: 6px 6px, 0 0; }
   .header-bar .button.image-button, .action-bar .button.image-button {
     padding: 8px; }
   .header-bar .button.text-button, .action-bar .button.text-button {